{include file="public/head" /}
</head>
<body class="layui-layout-body">
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">本地天气</div>
        <div class="layui-card-body" style="overflow: hidden">
            <div class="today layui-col-md4">
                <img src="__STATIC__/images/sun.png" alt="">
                <div class="message">
                    <p>今天</p>
                    <p>晴天</p>
                    <p>最高</p>
                    <p>最低</p>
                </div>
            </div>
            <div class="tomorrow solid layui-col-md4">
                <img src="__STATIC__/images/sun.png" alt="">
                <div class="message">
                    <p>明天</p>
                    <p>晴天</p>
                    <p>最高</p>
                    <p>最低</p>
                </div>
            </div>
            <div class="afterTomorrow solid layui-col-md4">
                <img src="__STATIC__/images/sun.png" alt="">
                <div class="message">
                    <p>后天</p>
                    <p>晴天</p>
                    <p>最高</p>
                    <p>最低</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        getWeather();
    });
    //ajax请求api获取天气数据
    function getWeather() {
        $.ajax({
            type: "get",
            dataType: "json",
            url: "http://wthrcdn.etouch.cn/weather_mini?city=宁波",
            success: function (data) {
                var tips = data.data.ganmao;
                var today = data.data.forecast[0];
                var tomorrow = data.data.forecast[1];
                var afterTomorrow = data.data.forecast[2];
                //填充数据
                $("#tips").html("Tips:" + tips);
                //填充天气数据
                setWeather(".today", today);
                setWeather(".tomorrow", tomorrow);
                setWeather(".afterTomorrow", afterTomorrow);
                //设置天气img的src
                matchType(today.type, ".today");
                matchType(tomorrow.type, ".tomorrow");
                matchType(afterTomorrow.type, ".afterTomorrow");
            }
        });
    }
    //提取json数据并填充到标签中
    function setWeather(date,data) {
        $(date).find('p').eq(0).html(data.date);
        $(date).find('p').eq(1).html(data.type);
        $(date).find('p').eq(2).html(data.high);
        $(date).find('p').eq(3).html(data.low);
    }
    //正则匹配天气类型，修改天气img的src
    function matchType(type,date) {
        var rain = /\u96e8/;
        var sun = /\u6674/;
        var cloud = /\u4e91/;
        //var overcast = /\u9634/;
        var imgName =  rain.test(type)?"rain":(sun.test(type)?"sun":(cloud.test(type)?"cloud":"overcast"));
        $(date).find('img').attr('src','__STATIC__/images/'+imgName+'.png');
    }
</script>
</body>
</html>